<template>
  <div class="e_box">
    <!-- 最大的装所有的row -->
    <el-row class="condition_box" type="flex" justify="space-between">
      <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 第一个控件row -->
        <el-row type="flex" justify="space-between">
          <!-- 第一个col -->
          <el-col :span="8">
            <el-row class="c_radio">
              <el-radio v-model="radio" :label="1">单站查询</el-radio>
            </el-row>
            <el-row>
              <el-form-item label="要素选择：">
                <!-- multiple -->
                <el-select @change="sele_change" v-model="value1" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <!-- 第二个col -->
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="选择站点:" prop="station_id">
                  <el-select
                    @change="c_select"
                    size="mini"
                    v-model="formInline.station_id"
                    placeholder="请选择"
                  >
                    <el-option
                      :key="item.station.id"
                      v-for="item in station"
                      :label="item.station.name"
                      :value="item.station.id"
                    ></el-option>
                    <!-- <el-option label="站点二" value="beijing"></el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <div class="block">
                  <span class="demonstration">查询时间:</span>
                  <el-date-picker
                    @change="date_change"
                    v-model="value2"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <!-- 第三个col -->
          <el-col :span="8">
            <el-row class="selector_station">
              <el-form-item label="选择子站：">
                <el-select
                  size="mini"
                  @change="kid_station_name"
                  v-model="formInline.kid_station"
                  placeholder="请选择"
                >
                  <el-option
                    :key="k"
                    v-for="(item,k) in kid_station"
                    :label="item.name"
                    :value="item.serial"
                  ></el-option>
                  <!-- <el-option label="站点二" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <!-- 第二个装按钮的row -->
    <el-row class="e_row" type="flex" justify="end">
      <el-button type="primary" size="mini" @click="chart_show">生成图表</el-button>
      <el-button type="danger" size="mini" @click="readside">重置</el-button>
    </el-row>
    <!-- 第三个图表row -->
    <!-- <el-row> -->
    <div v-loading="loading" id="main" style="width:100%;height:75%"></div>
    <!-- </el-row> -->
  </div>
</template>

<script>
// import echarts from "echarts";
//
import Qs from "qs";
import dateFtt from "../assets/lib/time.js";

export default {
  mounted() {
    // value2: ["2019-08-16 00:00:00", "2019-08-18 00:00:00"],
    // this.value2

    var a = new Date().toLocaleDateString();
    var b = new Date().toLocaleDateString();
    a = a.split("/").join("-") + " 00:00:00";

    b = b.split("/").join("-") + " 23:59:00";
    this.value2[0] = a;
    this.value2[1] = b;
    this.value2 = [...this.value2];
  },
  created() {
    this.get_one();
  },
  data() {
    return {
      loading: false,
      // 获取用户信息
      user_info: this.$store.state.user_info.data,
      // 下拉站点的循环
      station: [],
      // 气象站的下拉循环
      kid_station: [],
      value1: "",
      // 元素展示的下拉列表的数组
      options: [],
      checked: true,
      radio: 1,
      t_radio: true,
      formInline: {
        kid_station: ""
      },
      pickerOptions: {},
      value2: ["2019-08-16 00:00:00", "2019-08-18 00:00:00"],
      // 选中卡片的name值
      // activeName: "five",
      // 气压表单
      value3: [],
      // 图表使用的数据数组
      chart_data: [],
      // 更新时间
      update_time: [],
      // 图表实例
      myChart: {},
      // 元素名字存放
      elementName: [],
      // 元素对象
      el_obj: {
        name: "",
        type: "line",
        stack: "总量",
        data: [0, 0, 0, 0]
      },
      // 值数据
      el_obj_data: []
    };
  },
  methods: {
    // 点击生成图表
    async chart_show() {
      this.loading = true;
      var dateFtt1 = dateFtt.dateFtt;

      // 提醒用户选择站点和子站
      if (!this.formInline.station_id) {
        return this.$message.warning("请选择站点");
      } else if (!this.formInline.kid_station) {
        return this.$message.warning("请选择子站");
      }
      this.tableData = [];

      // 将对象打包好发送出去，记得使用qs转格式
      var abc = {
        // 气象站序列号
        serial: this.formInline.kid_station,
        // 要查询的元素的字段
        gogals: this.value1,
        // 开始时间
        startTime: this.value2[0],
        // 结束时间
        endTime: this.value2[1],
        // 查询几页
        page: this.page,
        // 一页有几条数据
        pageSize: this.pageSize
      };
      abc.startTime = dateFtt1("yyyy-MM-dd hh:mm:ss", new Date(this.value2[0]));
      abc.endTime = dateFtt1("yyyy-MM-dd hh:mm:ss", new Date(this.value2[1]));
      var { data: res } = await this.$http.post(
        "/data/listSingleDatasByRange",
        Qs.stringify(abc)
      );
      if (res.status == 7) return this.$message.warning("该元素暂无可查看数据");
      this.chart_data = res;

      var lock = false;
      var arr_2 = [];
      var arr_2_time = [];
      if (lock) {
        // 元素名字
        var elementName = [];
        // 存放元素对象数组
        var el_obj_arr = [];
        // 循环属性值存放的地方 datas
        this.chart_data.datas.forEach(item => {
          // 将元素更新时间保存下来
          this.update_time.push([item.update_time]);
          return;
        });
        // 循环属性数组
        this.chart_data.labels.some((item, index) => {
          // 先声明一个对象 用来装属性
          var el_obj = {};
          // 循环 属性需要用到的值
          this.chart_data.datas.forEach((item2, index2) => {
            // 将数组里边的第几项 有多少属性就有多少 值，一共几天的在一个数组里边
            this.el_obj_data[index2] = item2[item.elementSort];
          });
          el_obj.data = this.el_obj_data;
          this.el_obj_data = [];
          // 元素名字
          el_obj.name = item.elementName;
          // 这里的斯塔克 会把相同的 数据放在一组 进行堆叠 这里只要 给一个不一样的值或者
          // 禁用掉，即可放弃堆叠
          el_obj.type = "line";
          el_obj_arr.push(el_obj);
          elementName.push(item.elementName);
        });

        // 要展示的元素

        this.e_init(elementName, el_obj_arr);
      } else {
        // 循环返回的数据
        res.datas.forEach(item => {
          // 数据产生时间 和 该时间的数据 分别两个数组存放
          arr_2.push(item[res.labels[0].elementSort]);
          arr_2_time.push(item.update_time);
        });
      }
      //
      //
      this.e_init_2(
        arr_2,
        arr_2_time,
        res.labels[0].elementName + res.labels[0].elementUnit
      );
      this.loading = false;

      //

      // this.e_init_2(elementName, el_obj_arr);

      this.update_time = [];
    },
    // 清空表单(点击重置按钮)
    readside() {
      // 拿到所有数据清空
      // 站点信息清空
      // this.station = [];
      // 元素选择列表清空
      this.value1 = "";
      // 清空时间数组
      this.value2 = [];
      // 清空表单元素 含 站点和 子站点
      this.$refs.formInline.resetFields();
      // 由于赋值之后的表单元素无法进行重置清除，所有重新赋值字符串
      this.formInline.kid_station = "";
      this.$message("表单已重置");
    },
    // 获取跳转过来时的首屏数据
    async get_one() {
      let serial = this.$route.params.id;
      // 将默认值子站填入表单指定区域
      this.formInline.kid_station = serial;
      if (!serial) {
        // 单点数据查询 假设没有通过按钮跳转
        let { data: res2 } = await this.$http(
          `/station/listStationsAndCollectorSingle/${this.user_info.id}`
        );
        this.station = res2.datas;

        return false;
      }

      // 获取数据请求==============================================================用户点击按钮时的代码
      const { data: res } = await this.$http(`/data/realtimeSingle/${serial}`);

      if (res.status == 5) return this.$message.error(res.msg);

      this.options = [];
      // 找元素======函数这里是先找到按钮跳转过来的时候 的帮忙选好的默认元素
      this.find_element(res);
      // 获取站点请求==================================================================
      const { data: res1 } = await this.$http(
        `/station/listStationsAndCollectorSingle/${this.user_info.id}`
      );
      this.station = res1.datas;
      // 筛选出对应的子站
      this.station.forEach(item => {
        item.collectorSingles.forEach(item2 => {
          if (item2.serial == this.formInline.kid_station) {
            this.formInline.station_id = item.station.id;
            this.formInline.station_name = item2.name;
            // 仅push本站点下的气象站
            this.kid_station.push(item2);
          }
        });
      });
      this.chart_show();

      //
    },
    async e_init_2(arr_2, arr_2_time, ele_name) {
      var _this = this;

      this.myChart = echarts.init(document.getElementById("main"));
      this.myChart.clear();

      var option = {
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        title: {
          left: "center",
          text: "大数据量面积图"
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: arr_2_time
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"]
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 10,
            // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: ele_name,
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 70, 131)"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)"
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)"
                }
              ])
            },
            data: arr_2
          }
        ]
      };
      this.myChart.setOption(option);
    },
    // echarts图表初始化
    // async e_init(elementName, el_obj_arr) {
    //   var _this = this;
    //   //
    //   // 基于准备好的dom，初始化echarts实例
    //   this.myChart = echarts.init(document.getElementById("main"));
    //   // 清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。
    //   // 使数据能够根据用户选择的元素来呈现
    //   this.myChart.clear();
    //   // 绘制图表
    //   var option = {
    //     title: {
    //       text: "可视曲线图"
    //     },
    //     tooltip: {
    //       trigger: "axis"
    //     },
    //     legend: {
    //       // data: ["噪声1", "H2S", "SO2", "空气温度", "空气湿度", "光照强度"]

    //       // data: [
    //       //   "中储粮一场",
    //       //   "中储粮二场",
    //       //   "中储粮三场",
    //       //   "直接访问",
    //       //   "搜索引擎"
    //       // ]
    //       data: elementName
    //     },
    //     grid: {
    //       left: "3%",
    //       right: "4%",
    //       bottom: "3%",
    //       containLabel: true
    //     },
    //     toolbox: {
    //       //   show: true,
    //       feature: {
    //         saveAsImage: { type: "png" }
    //         // brush: { type: "lineY" }
    //       }
    //     },
    //     xAxis: {
    //       type: "category",
    //       boundaryGap: false,
    //       // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    //       data: _this.update_time
    //     },
    //     yAxis: {
    //       type: "value"
    //     },
    //     series: el_obj_arr
    //     // [
    //     //   {
    //     //     name: "中储粮一场",
    //     //     type: "line",
    //     //     stack: "总量",
    //     //     data: [120, 132, 101, 134, 90, 230, 210]
    //     //   },
    //     //   {
    //     //     name: "中储粮二场",
    //     //     type: "line",
    //     //     stack: "总量",
    //     //     data: [220, 182, 191, 234, 290, 330, 310]
    //     //   },
    //     //   {
    //     //     name: "中储粮三场",
    //     //     type: "line",
    //     //     stack: "总量",
    //     //     data: [150, 232, 201, 154, 190, 330, 410]
    //     //   }
    //     // ]
    //   };
    //   this.myChart.setOption(option);
    // },
    sele_change() {},
    c_radio(a) {},
    date_change(a) {},
    time_radio(a) {},
    // tab切换事件
    handleClick(a) {},
    // 找某个气象站下可以查看的元素的操作封装
    find_element(res) {
      this.value1 = "";
      if (res.status == 7)
        return this.$message.warning("该站点下暂无可查看元素");

      res.labels.forEach((item, index) => {
        this.obj_data = {
          value: res.labels[index].elementSort,
          label: res.labels[index].elementName,
          unit: res.labels[index].elementUnit
        };

        // this.value1.push(this.obj_data.value);
        this.options.push(this.obj_data);
        // this.formInline.station = item
      });
    },
    // 选择站点方法
    c_select(a) {
      this.fn1(a);
    },
    // 当选择站点的下拉框变动时
    async fn1(id) {
      // 每次调用之前要先把上一次的value值清除(不然会叠加)
      this.value1 = "";

      var k_obj = this.station.filter(item => {
        // if (item.id == id)
        return item.station.id == id;
      });
      this.kid_station = k_obj[0].collectorSingles;
      this.formInline.kid_station = k_obj[0].collectorSingles.serial;
    },
    // 选择气象站事件
    async kid_station_name(serial) {
      // 过滤出来对应的子站名（找气象站名的操作）
      var data = this.kid_station.filter(item => {
        return item.serial == serial;
      });
      this.formInline.station_k_name = data[0].name;
      // 找该气象站下的可以查询的元素
      let { data: res } = await this.$http(`/data/realtimeSingle/${serial}`);
      if (res.status == 5) return this.$message.error(res.msg);
      // 在push之前尽量清空原数组以免发生叠加的状况
      this.options = [];
      // 这是用户没有点击按钮查数据时的查询操作，需要在选择完气象站之后 进行的操作
      this.find_element(res);
      // 用户选择完气象站之后 将当日的元素信息展现出来
    }
  }
};
</script>

<style lang="less" scoped>
.el-form {
  width: 100%;
}
#main,
.e_box {
  height: 100%;
  overflow-x: hidden;
}
.e_row {
  padding-right: 162px;
  border-bottom: 2px dashed #ccc;
  padding-bottom: 30px;
  margin-bottom: 10px;
}
</style>